<template>
    <div class="gs-choice-box">
        <el-row>
            <el-col :span="2" style="text-align: center">
                <img src="/src/assets/icon/svg/办公用品申领 icon_3-02.svg" alt="" style="width: 40px">
            </el-col>
            <el-col :span="4" style="line-height: 42px;">
                物品选择
            </el-col>
        </el-row>
        <el-container>
            <el-aside>
                <el-row>
                    <el-col :span="8" style="font-size: 13px;line-height: 24px;text-align: center;">
                        全部类型
                    </el-col>
                    <el-col :span="16" style="position: relative">
                        <el-input size="small" placeholder="查询" v-model="treeSearch"/>
                        <el-button :icon="Search" class="search-bn" type="text" @click="filterTypeTreeClick"/>
                    </el-col>
                </el-row>
                <el-tree-v2
                    ref="gsTypeTreeRef"
                    :data="this.$store.state.gsTypeOptions"
                    :props="{
                        value: 'value',
                        label: 'label',
                        children: 'children',
                    }"
                    @node-click="gsTypeNodeClick"
                    :filter-method="filterGsType"
                    :height="400"
                    size="small"
                />
            </el-aside>
            <el-main>
                <el-table
                    :data="gsTableData"
                    ref="gsTableRef"
                    :resizable="true"
                    border
                    size="small"
                    @row-dblclick="choiceGs"
                >
                    <el-table-column label="物品名称" prop="name"/>
                    <el-table-column label="物品编码" prop="code"/>
                    <el-table-column label="规格" prop="spec"/>
                    <el-table-column label="库存" prop="num"/>
                    <el-table-column label="是否可用" prop="enabled">
                        <template #default="s">
                            {{s.row.enabled===1?'可用':'不可用'}}
                        </template>
                    </el-table-column>
                    <el-table-column label="类别编号" prop="gsTypeId"/>
                </el-table>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import {getGsTypeOptions} from "../../../../../network/adm/gs-type";
import {getGsList} from "../../../../../network/adm/gs";
import {Search} from '@element-plus/icons-vue'

export default {
    name: "GsChoiceBox2",
    emits: ['choice-gs'],
    setup(){
        return{
            Search
        }
    },
    data(){
        return {
            treeSearch: null,
            typeTreeData: [],
            gsTableData: []
        }
    },
    methods: {
        choiceGs(row, column, event){
            this.$emit('choice-gs',row);
        },
        gsTypeNodeClick(data, node, e) {
            // console.log('data',data);
            let filterTypeData = [];
            if(data!==null){
                let {value, children} = data;
                this.$store.state.gsList.forEach(e => {
                    if (e.gsTypeId === value) {//属于父类类型
                        filterTypeData.push(e)
                        return;
                    }
                    children.forEach(e2 => {//属于子类类型
                        if (e.gsTypeId === e2.value) {
                            filterTypeData.push(e)
                        }
                    })
                })
            }else{
                this.$store.state.gsList.forEach(e => {
                    filterTypeData.push(e);
                })
            }
            this.gsTableData = filterTypeData;
        },
        filterTypeTreeClick(){
            this.$refs.gsTypeTreeRef.filter(this.treeSearch);
        },
        filterGsType(keyword,node){
            if(this.$utils.isEmpty(this.keyword)){
                return true;
            }
            return node.label.includes(keyword);
        },
        loadGsList(){
            getGsList().then(vo=>{
                this.$store.commit('setGsList',vo.data);

            })
        },
        loadGsTypeOptions(){
            getGsTypeOptions().then(vo=>{
              this.$store.commit('setGsTypeOptions',vo.data);
            })
        },
        init(){
            if(this.$store.state.gsTypeOptions.length===0){
                this.loadGsTypeOptions();
            }
            if(this.$store.state.gsList.length===0){
                this.loadGsList();
            }
            let a = [];
            this.$store.state.gsList.forEach(e=>{
              a.push(e);
            })
            this.gsTableData = a;
        }
    },
    created() {
        this.init();
    }
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}
.el-tree-node__label{
    font-size: 13px;
}
.el-container{
    min-height: 400px;
}
.el-tree{
    /*height: 99%;*/
}
.el-main{
    padding: 0;
    border: 1px solid #d3d3d37a;
    border-left:none ;
}
.el-side{
    border: 1px solid #d3d3d37a;
}
.search-bn{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 2px;
    right: 7px;
}
.el-button--text{
    color: #666666;
}
.gs-choice-box{

}
.el-aside{
    width: 200px;
    border: 1px solid lightgray;
    border-left: none;
}
</style>
<style>
.el-tree-node__label {
    /*width: auto;*/
    /*margin-top: 12px;*/
    /*float: right;*/
    /*font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;*/
    font-size: 12px;
    /*color: #999999;*/
    /*line-height: 25px;*/
    /*letter-spacing: 1px;*/
}
.el-dialog__header{
    background: rgb(249,249,249);
    margin-right: 0;
}
.el-dialog__body{
    padding: 0;
}
</style>